<template>
	<div>
		<div ref="bodyFrom" :style="style1">
			<slot name="searchMenu"></slot>
			<div>
				<el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
				<el-button icon="el-icon-delete" @click="reset">重置</el-button>
				<slot name="searchMenuBtn"></slot>
			</div>
		</div>

		<div class="setting">
			<slot name="menuLeft"></slot>
			<div>
				<slot name="menuRight"></slot>
				<el-tooltip class="item" effect="dark" content="刷新" placement="top" :open-delay="1000">
					<el-button icon="el-icon-refresh" circle @click="refresh"></el-button>
				</el-tooltip>
				<el-tooltip class="item" effect="dark" content="搜索" placement="top" :open-delay="1000">
					<el-button icon="el-icon-search" circle @click="handleChange(check)"></el-button>
				</el-tooltip>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
//
import { defineComponent } from "vue";

export default defineComponent({
	name: "",
	props: {
		height: {
			type: [Number, String],
			default: 55
		}
	},
	data() {
		return {
			activeNames: [],
			check: true,
			style1: {
				height: this.height + "px",
				overflow: "hidden",
				transition: "height 0.3s",
				display: "flex",
				"flex-wrap": "wrap"
			}
		};
	},
	watch: {
		check(val: boolean) {
			if (val) {
				this.style1 = {
					height: this.height + "px",
					overflow: "hidden",
					transition: "height 0.3s",
					display: "flex",
					"flex-wrap": "wrap"
				};
			} else {
				this.style1 = {
					height: "0px",
					overflow: "hidden",
					transition: "height 0.3s",
					display: "flex",
					"flex-wrap": "wrap"
				};
			}
		}
	},
	components: {},
	computed: {},
	methods: {
		handleChange(val: boolean) {
			this.check = !val;
		},
		refresh() {
			this.$emit("on-refresh");
		},
		query() {
			this.$emit("on-query");
		},
		reset() {
			this.$emit("on-reset");
		}
	}
});
</script>

<style scoped lang="scss">
.collapse {
	height: 55px;
	min-width: 1350px;
	overflow: hidden;
	transition: height 0.3s;
	display: flex;
	flex-wrap: wrap;
}
.collapse2 {
	height: 0px;
	min-width: 1350px;
	overflow: hidden;
	transition: height 0.3s;
	display: flex;
	flex-wrap: wrap;
	// border: 1px solid black;
}

.setting {
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
}
</style>
